<template>
  <div>
    <a-form :form="form.structure" style="max-width: 500px; margin: 40px auto 0;">
      <a-form-item
        label="供应商"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a-select
          placeholder="请选择"
          v-decorator="['supplier', {
            rules: [{required: true, message: '请选择供应商！'}]
          }]">
          <a-select-option v-for="(item, index) in form.supplierList" :key="index" :value="item">
            {{ item }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="物品信息" :labelCol="labelCol" :wrapperCol="wrapperCol" required>
        <stuffInfo :length="form.subLength" />
      </a-form-item>
      <a-form-item
        label="总金额"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a-input
          prefix="￥"
          v-decorator="['money', {
            rules: [{required: true, message: '总金额必须填写！'}, {pattern: '^[1-9][0-9]*$', message: '请输入金额！'}]
          }]"/>
      </a-form-item>
      <a-form-item
        label="审核员"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a-select
          placeholder="请选择"
          v-decorator="['auditor', {
            rules: [{required: true, message: '请选择审核员！'}]
          }]">
          <a-select-option v-for="(item, index) in form.auditorList" :key="index" :value="item">
            {{ item }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item
        label="备注"
        :labelCol="labelCol"
        :wrapperCol="wrapperCol">
        <a-textarea
          placeholder="请备注...."
          :auto-size="{ minRows: 2, maxRows: 4 }"
          v-decorator="['purchaseRemark', {
            rules: [{required: true, message: '请填写备注！'}]
          }]"/>
      </a-form-item>
      <a-form-item :wrapperCol="{span: 19, offset: 5}">
        <a-button type="primary" @click="nextStep">下一步</a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import storage from 'store'
import { supplierList, auditorList } from '@/api/purchase'
import stuffInfo from './stuffInfo'

export default {
  name: 'Step1',
  components: { stuffInfo },
  data () {
    return {
      form: {
        structure: this.$form.createForm(this),
        supplierList: [],
        auditorList: [],
        subLength: 1
      },
      labelCol: { lg: { span: 5 }, sm: { span: 5 } },
      wrapperCol: { lg: { span: 19 }, sm: { span: 19 } }
    }
  },
  created () {
    this.getSupplierList()
    this.getAuditorList()
    // 回显数据
    const info = storage.get('purchaseDetail')
    const _this = this
    if (info) {
      _this.form.subLength = info.name.length
      for (let i = 0; i < info.name.length; i++) {
        _this.form.structure.getFieldDecorator(`name[${i}]`)
        _this.form.structure.getFieldDecorator(`type[${i}]`)
        _this.form.structure.getFieldDecorator(`unit[${i}]`)
        _this.form.structure.getFieldDecorator(`price[${i}]`)
        _this.form.structure.getFieldDecorator(`amount[${i}]`)
      }
      _this.$nextTick(() => {
        _this.form.structure.setFieldsValue(info)
      })
    }
  },
  methods: {
    nextStep () {
      const { validateFields } = this.form.structure
      validateFields((err, values) => {
        console.log(values)
        if (!err) {
          this.$store.commit('purchaseDetail', values)
          this.$emit('nextStep')
        }
      })
    },
    getSupplierList () {
      const _this = this
      supplierList()
      .then(res => {
        _this.form.supplierList = res.data.supplierList
      })
      .catch(err => {
        _this.$message.error(err.response.data.msg || '获取供应商列表失败')
      })
    },
    getAuditorList () {
      const _this = this
      auditorList()
      .then(res => {
        _this.form.auditorList = res.data.auditorList
      })
      .catch(err => {
        _this.$message.error(err.response.data.msg || '获取审核员列表失败')
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>
